<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'

import { ref } from "vue";
// import { Snackbar } from "@varlet/ui";
import router from "./router";

let active = ref(0);
// let handleClick = (active) => {
//   Snackbar.success(`clicked ${active}`)
// }

let shouye =(active:any) => {
  router.push('/')
}
let dianpu =(active:any) => {
  router.push('/dianpu')
}
let wode =(active:any) => {
  router.push('/wode')
}

</script>

<template>
  <div>
    <router-view></router-view>
    <var-bottom-navigation :active="active" fixed>
      <var-bottom-navigation-item label="首页" @click="shouye" v-slot:icon>
        <i style="font-size: 20px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouye"></use>
          </svg>
        </i>
      </var-bottom-navigation-item>
      <var-bottom-navigation-item
        @click="dingdan"
        label="订单"
        v-slot:icon
      >
        <i style="font-size: 20px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dingdan"></use>
          </svg>
        </i>
      </var-bottom-navigation-item>
      <var-bottom-navigation-item @click="wode" label="我的" v-slot:icon>
        <i style="font-size: 20px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-biaoqiankuozhan_wode-355"></use>
          </svg>
        </i>
      </var-bottom-navigation-item>
    </var-bottom-navigation>
  </div>
</template>

<style>
  *{
    padding: 0;
    margin: 0;
    text-decoration: none;
  }
  html,body{
    width:100%;
    height: 100%;
  }
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
